import 'package:flutter/material.dart';
import 'package:flutter_module/style/colors.dart';

class CooperationListMaskItem {
  CooperationListMaskItem({Key? key, required this.id, required this.title});
  String id;
  bool select = false;
  String title;
}

class CooperationListMaskView extends StatefulWidget {
  CooperationListMaskView(
      {Key? key, required this.items, required this.sureSeletItems})
      : super(key: key);

  final List<CooperationListMaskItem> items;
  final Function(List<CooperationListMaskItem>) sureSeletItems;

  @override
  _CooperationListMaskViewState createState() =>
      _CooperationListMaskViewState(items, sureSeletItems);
}

class _CooperationListMaskViewState extends State<CooperationListMaskView>
    with TickerProviderStateMixin {
  _CooperationListMaskViewState(this.items, this.sureSeletItems);

  List<CooperationListMaskItem> items;

  Function sureSeletItems;

  late AnimationController controller;
  late Animation<Offset> animation;

  @override
  void initState() {
    controller =
        AnimationController(duration: Duration(milliseconds: 300), vsync: this);
    animation =
        Tween(begin: Offset(0, -0.5), end: Offset.zero).animate(controller);
    controller.forward();

    super.initState();
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      clipBehavior: Clip.hardEdge,
      decoration: BoxDecoration(),
      child: Stack(
        children: [
          Container(
            width: double.infinity,
            height: double.infinity,
            color: Colors.black.withOpacity(0.5),
          ),
          SlideTransition(
            position: animation,
            child: Container(
              width: double.infinity,
              color: Colors.transparent,
              child: Column(children: [
                Container(
                  color: Colors.white,
                  width: double.infinity,
                  padding: EdgeInsets.fromLTRB(30, 10, 30, 40),
                  child: Wrap(
                    alignment: WrapAlignment.start,
                    runSpacing: 10,
                    spacing: 15,
                    children: _getItems(),
                  ),
                ),
                Row(
                  children: [
                    GestureDetector(
                      child: Container(
                        color: Colors.white,
                        width: 130,
                        height: 50,
                        child: Center(
                          child: Text(
                            '重置',
                            style: TextStyle(
                                color: ThemeColors.text888,
                                fontSize: 12,
                                fontWeight: FontWeight.normal,
                                decoration: TextDecoration.none),
                          ),
                        ),
                      ),
                      onTap: () {
                        var resetArr =
                            items.map((e) => e..select = false).toList();
                        setState(() {
                          items = resetArr;
                        });
                      },
                    ),
                    Expanded(
                      child: GestureDetector(
                        onTap: () {
                          // 过滤数组
                          var seletctItems =
                              items.where((element) => element.select).toList();
                          //回调
                          sureSeletItems(seletctItems);
                        },
                        child: Container(
                          height: 50,
                          color: ThemeColors.redEF5D5E,
                          child: Center(
                              child: Text(
                            '确定',
                            style: TextStyle(
                                color: Colors.white,
                                fontSize: 12,
                                fontWeight: FontWeight.normal,
                                decoration: TextDecoration.none),
                          )),
                        ),
                      ),
                    ),
                  ],
                )
              ]),
            ),
          )
        ],
      ),
    );
  }

  List<Widget> _getItems() => items
      .map((e) => GestureDetector(
            onTap: () {
              e.select = !e.select;
              setState(() {
                items = items;
              });
            },
            child: Container(
              width: (MediaQuery.of(context).size.width - 15 * 2 - 30 * 2) / 3,
              height: 30,
              decoration: BoxDecoration(
                  border: Border.all(
                      color: e.select
                          ? ThemeColors.redEF5D5E
                          : ThemeColors.grayE5E5E5),
                  borderRadius: BorderRadius.circular(3)),
              child: Center(
                child: Text(
                  e.title,
                  style: TextStyle(
                      color: e.select
                          ? ThemeColors.redEF5D5E
                          : ThemeColors.text888,
                      fontSize: 12,
                      fontStyle: FontStyle.normal,
                      fontWeight: FontWeight.normal,
                      decoration: TextDecoration.none),
                ),
              ),
            ),
          ))
      .toList();
}
